<template>
  <div>
      <h2>欢迎来到商品信息管理页面</h2>
      <!--导航条-->
        <!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">关于我们</a></el-menu-item>
        </el-menu>
        <br> -->
        <!--搜索框-->
        <!-- <el-row>
            <el-col :span="3" class="grid">
                <el-input v-model="intxt" placeholder="请输入内容" size="mini"></el-input>
            </el-col>
            <el-col :span="1" class="grid">
                <el-button type="success" icon="el-icon-search" size="mini" @click="query()">搜索</el-button>
            </el-col>
        </el-row>
        <br> -->
        <!--表格数据及操作-->
        <el-table :data="goodses" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
            <!--索引-->
            <!-- <el-table-column type="index" label="行号">
                <template slot-scope="scope">
                    {{(page.pageNum-1)*page.pageSize+scope.$index+1}}
                </template>
            </el-table-column> -->
            <el-table-column prop="id" label="商品编号" width="180" sortable>
            </el-table-column>
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="180">
            </el-table-column>
            <el-table-column prop="count" label="商品库存" width="180">
            </el-table-column>
            <el-table-column label="编辑" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit()">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除" width="100">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <!--新增按钮-->
        <el-col :span="1" class="grid">
            <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" round>新增</el-button>
        </el-col>        
        <br>
        <!--分页条-->
        <!-- <el-pagination background layout="prev, pager, next" :total="page.totalRecords" 
        :page-size="page.pageSize"  @current-change="currentChange">
        </el-pagination> -->

        <!-- 新增商品信息模态框 -->
        <!-- <el-dialog title="新增商品" :visible="addGoodsForm"  :modal-append-to-body='false' @close='closeDialog'>
        <el-form id="#addgForm" ref="addgForm" :model="addgForm" label-width="80px">
            <el-form-item label="商品编号" prop="id">
            <el-input  v-model="addgForm.id" max-length="10"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
            <el-input v-model="addgForm.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
            <el-input v-model="addgForm.price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="count">
            <el-input v-model="addgForm.count"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="goodsAdd()">确定</el-button>
            <el-button @click="addGoodsForm = false;">取消</el-button>
            </el-form-item>
        </el-form>
        </el-dialog> -->

        <!-- 编辑商品信息模态框 -->
        <el-dialog title="修改商品信息" :visible="editGoodsForm"  :modal-append-to-body='false'>
        <el-form id="#editgForm" ref="editgForm" :model="editgForm" label-width="80px">
            <el-form-item label="商品编号" prop="id">
            <el-input  v-model="editgForm.id" max-length="10"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
            <el-input v-model="editgForm.name"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
            <el-input v-model="editgForm.price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="count">
            <el-input v-model="editgForm.count"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary">确定</el-button>
            <el-button @click="editGoodsForm = false;">取消</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>

  </div>
</template>

<script>
export default {
    data(){
        return {
            goodses:[
            {id:'0001',name:'小米8',price:2588,count:12},
            {id:'0002',name:'小米8',price:2588,count:12},
            {id:'0003',name:'小米8',price:2588,count:12},
            {id:'0004',name:'小米8',price:2588,count:12},
            {id:'0005',name:'小米8',price:2588,count:12},
            {id:'0006',name:'小米8',price:2588,count:12},
            {id:'0007',name:'小米8',price:2588,count:12},
            {id:'0008',name:'小米8',price:2588,count:12},
            {id:'0009',name:'小米8',price:2588,count:12},
            {id:'00010',name:'小米8',price:2588,count:12},
            {id:'00011',name:'小米8',price:2588,count:12},
            {id:'00012',name:'小米8',price:2588,count:12},
            {id:'00013',name:'小米8',price:2588,count:12},
            {id:'00014',name:'小米8',price:2588,count:12},
            {id:'00015',name:'小米8',price:2588,count:12},
            {id:'00016',name:'小米8',price:2588,count:12},
            {id:'00017',name:'小米8',price:2588,count:12},
            {id:'00018',name:'小米8',price:2588,count:12},
            {id:'00019',name:'小米8',price:2588,count:12},
            {id:'00020',name:'小米8',price:2588,count:12}
        ],
        editGoodsForm:false,
        editgForm:{}
        }
    },
    methods:{
        edit(){
            this.editGoodsForm=true;
        }
    }

}
</script>

<style>

</style>